import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { getdetaillist } from "../../request/api";
import { Calendar, Card, Button ,Radio,Stepper } from "antd-mobile";
import Buttons from "../../components/Button";

function Particulars() {
  const defaultSingle = new Date("2022-03-04");
  const [xqdata, setxzqdata] = useState<any>({});
  const [state, settate] = useState(false);
  const { idx } = useParams();
  useEffect(() => {
    getdetaillist(idx).then((res) => {
      console.log(res);
      setxzqdata(res.data.data);
    });
  }, [idx]);
  return (
    <div>
      <Calendar
        style={{ height: "22vh", overflow: "hidden" }}
        selectionMode="single"
        defaultValue={defaultSingle}
        onChange={(val) => {
          console.log(val);
        }}
      />
      <h3>选择你的票</h3>
      <div style={{padding:'10px'}}>
        <Card
          title={
            <div
              style={{
                width: "90vw",
                fontWeight: "normal",
                background: state ? "#00334e" : "#fff",
                color: state ? "#fff" : "#00334e",
              }}
            >
              vip参观{" "}
              <span
                onClick={() => {
                  settate(!state);
                }}
                style={{ float: "right" }}
              >
                <Radio />
              </span>
            </div>
          }
          style={{ borderRadius: "16px",border: "1px solid #ccc" }}
        >
          <div style={{ display: "flex" }}>
          
                    <img style={{width:'100px',height:'120px'}} src={xqdata.imgPath} alt="" />
                    <div>
                        <p>{xqdata.showDetail}</p>
                        <div>
                            <p>{xqdata.maxNum}张余票</p>
                            <p>￥{xqdata.showPrice}</p>
                        </div>
                    </div>
          </div>
          <div onClick={(e) => e.stopPropagation()}>
            <div style={{display:'flex'}}>显示票价明细
                <Stepper min={0} max={xqdata.maxNum} />
            </div>
            
          </div>
        </Card>
      </div>
      <Buttons text='继续'></Buttons>
    </div>
  );
}

export default Particulars;
